<template>
  <div>
    <a-alert type="info" show-icon style="margin-top: 10px; margin-bottom: 10px">
      <template slot="message" v-if="!picked">
        <span>确认提交后，订单将直接发给审核员进行审核，无法退回。</span>
      </template>
      <template slot="message" v-else>
        <span>订单基本信息</span>
      </template>
    </a-alert>
    <a-card title="基本信息" :bordered="false">
      <basicInfo ref="basicInfo" disabled/>
    </a-card>
    <a-card title="物品信息" :bordered="false">
      <a-table
        rowKey="id"
        :columns="columns"
        :dataSource="table.data"
        :pagination="false">
        <template slot="salePrice" slot-scope="text">
          <a-input
            disabled
            addon-before="￥"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="saleAmount" slot-scope="text, record">
          <a-input
            disabled
            :addon-after="record.unit"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="totalPrice" slot-scope="text, record">
          <span style="color: red">{{ record.price * record.amount }} 元</span>
        </template>
      </a-table>
    </a-card>
    <a-card title="销售备注" :bordered="false">
      <a-textarea
        v-model="saleRemark"
        disabled
        placeholder="请备注...."
        :auto-size="{ minRows: 4, maxRows: 5 }"
      />
    </a-card>
    <footer-tool-bar>
      <a-button v-if="!picked" @click="prevStep" style="margin-right: 20px">上一步</a-button>
      <a-button v-if="!picked" type="primary" @click="nextStep" :loading="buttonLoading">提交</a-button>
      <a-button v-if="picked" @click="backToList" style="margin-right: 20px">返回列表</a-button>
      <a-button v-if="picked" type="primary" @click="backToAudit">审批状态</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import basicInfo from './basicInfo'
import footerToolBar from './footerToolbar'
import cloneDeep from 'lodash.clonedeep'
import storage from 'store'
import { add } from '@/api/sale'

export default {
  name: 'SaleStep2',
  components: { basicInfo, footerToolBar },
  computed: {
    columns () {
      return [
        {
          title: '物品编号',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '物品名',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          align: 'center'
        },
        {
          title: '单价',
          dataIndex: 'price',
          align: 'center',
          scopedSlots: { customRender: 'salePrice' }
        },
        {
          title: '数量',
          dataIndex: 'amount',
          align: 'center',
          scopedSlots: { customRender: 'saleAmount' }
        },
        {
          title: '总计',
          scopedSlots: { customRender: 'totalPrice' },
          align: 'center'
        }
      ]
    }
  },
  props: {
    picked: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      table: {
        data: []
      },
      saleRemark: '',
      buttonLoading: false
    }
  },
  mounted () {
    // 回显数据
    const saleDetail = storage.get('saleDetail')
    this.table.data = cloneDeep(saleDetail.data)
    this.saleRemark = cloneDeep(saleDetail.saleRemark)

    delete saleDetail.saleRemark
    delete saleDetail.data

    this.$refs.basicInfo.form.structure.setFieldsValue(saleDetail)
  },
  methods: {
    nextStep () {
      const _this = this
      _this.buttonLoading = true
      this.$refs.basicInfo.form.structure.validateFields((err, values) => {
        if (!err) {
          values.data = _this.table.data
          values.saleRemark = _this.saleRemark
          add(values)
          .then(res => {
            storage.remove('saleDetail')
            _this.buttonLoading = false
            _this.$emit('nextStep', _this.$refs.basicInfo.form.structure.getFieldValue('code'))
          })
          .catch(err => {
            _this.$message.error(err.response.data.msg)
            _this.buttonLoading = false
          })
        } else {
          this.buttonLoading = false
        }
      })
    },
    prevStep () {
      this.$emit('prevStep')
    },
    backToList () {
      storage.remove('saleDetail')
      this.$router.push('/sale/saleManage')
    },
    backToAudit () {
      storage.remove('saleDetail')
      this.$emit('nextStep', this.$refs.basicInfo.form.structure.getFieldValue('code'))
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 10px;
}
/deep/ .ant-input-group-addon {
  padding: 0 6px
}
/deep/ .ant-input {
  padding: 4px 4px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 12px 10px;
}
</style>
